<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JWT - 安全登录</title>
    <script src="/js/tailwind.js"></script>
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link rel='stylesheet' href='/css/tailwind.min.css'>
    <link rel="stylesheet" href="/css/toastr.min.css">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/toastr.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0E42D2',
                        neutral: {
                            50: '#F9FAFB',
                            100: '#F3F4F6',
                            200: '#E5E7EB',
                            700: '#374151',
                            800: '#1F2937',
                            900: '#111827'
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #0E42D2 100%);
            }
            .card-shadow {
                box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .btn-effect {
                @apply hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-200;
            }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 min-h-screen flex items-center justify-center p-4">
<div class="w-full max-w-6xl mx-auto">
    <!-- 登录卡片 -->
    <div class="flex flex-col md:flex-row rounded-2xl overflow-hidden card-shadow bg-white">
        <!-- 左侧品牌区域 -->
        <div class="w-full md:w-5/12 bg-gradient-primary p-8 md:p-12 text-white relative overflow-hidden">
            <!-- 装饰图形 -->
            <div class="absolute inset-0 opacity-10">
                <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
                    <path fill="#FFFFFF" d="M45.8,-73.6C59.9,-66.7,72.3,-56.9,78.7,-43.9C85.1,-30.9,85.5,-15.4,83.9,-0.5C82.3,14.4,78.6,28.8,70.2,40.6C61.8,52.4,48.7,61.6,35.1,68.2C21.5,74.8,7.2,78.8,-6.6,80.1C-20.4,81.4,-33.6,79.9,-45.4,72.3C-57.2,64.7,-67.6,51,-74.2,36.4C-80.8,21.8,-83.6,6.3,-82.4,-8.5C-81.2,-23.3,-76,-37.1,-66.9,-47.3C-57.8,-57.5,-44.7,-64.1,-30.8,-68.7C-16.9,-73.3,-3.5,-75.9,9.4,-77.9C22.3,-79.9,44.6,-81.3,59.9,-73.6Z" transform="translate(100 100)" />
                </svg>
            </div>

            <div class="relative z-10 h-full flex flex-col justify-between">
                <div>
                    <div class="w-12 h-12 rounded-lg bg-white/20 flex items-center justify-center mb-6">
                        <i class="fa fa-key text-white text-xl"></i>
                    </div>
                    <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">JWT安全认证</h2>
                    <p class="text-white/80 text-lg mb-6">通过安全令牌保护您的账户和数据安全</p>
                </div>

                <div>
                    <h3 class="text-xl font-semibold mb-2">${appName}</h3>
                    <p class="text-white/70 mb-6">请求访问您的账户</p>
                    <div class="h-32 bg-white/10 rounded-lg backdrop-blur-sm flex items-center justify-center">
                        <img src="${appIcon}" alt="应用图标" class="max-h-24 max-w-24 object-contain">
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧登录表单 -->
        <div class="w-full md:w-7/12 p-8 md:p-12 flex flex-col justify-center">
            <div class="max-w-md mx-auto w-full">
                <div class="mb-8">
                    <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-neutral-800 mb-2">欢迎回来</h1>
                    <p class="text-neutral-700">请登录您的账号以授权访问 ${appName}</p>
                </div>

                <form action="${loginUrl}" method="POST" class="space-y-5">
                    <input type="hidden" name="appId" value="${appId}"/>
                    <input type="hidden" name="clientId" value="${clientId}"/>

                    <!-- 用户名输入 -->
                    <div>
                        <label for="name" class="block text-sm font-medium text-neutral-700 mb-1.5">用户名</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-neutral-400">
                                <i class="fa fa-user"></i>
                            </div>
                            <input id="name" type="text" name="name" required autofocus
                                   class="pl-10 w-full py-3 bg-neutral-50 border border-neutral-200 rounded-lg input-focus"
                                   placeholder="请输入您的用户名">
                        </div>
                    </div>

                    <!-- 密码输入 -->
                    <div>
                        <div class="flex items-center justify-between mb-1.5">
                            <label for="pwd" class="block text-sm font-medium text-neutral-700">密码</label>
                            <a href="#" class="text-sm text-primary hover:text-secondary transition-colors">忘记密码?</a>
                        </div>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-neutral-400">
                                <i class="fa fa-lock"></i>
                            </div>
                            <input id="pwd" type="password" name="pwd" required
                                   class="pl-10 w-full py-3 bg-neutral-50 border border-neutral-200 rounded-lg input-focus"
                                   placeholder="请输入您的密码">
                            <button type="button" id="togglePwd" class="absolute inset-y-0 right-0 pr-3 flex items-center text-neutral-400 hover:text-neutral-700 transition-colors">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                    </div>

                    <!-- 登录按钮 -->
                    <div class="pt-2">
                        <button type="submit"
                                class="w-full bg-primary hover:bg-secondary text-white font-medium py-3 px-4 rounded-lg btn-effect flex items-center justify-center">
                            <span>登录</span>
                            <i class="fa fa-arrow-right ml-2"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="mt-6 text-center text-gray-500 text-sm">
        <p>© 2025 JWT安全认证中心. 保留所有权利.</p>
    </div>
</div>

<script>
    // 配置toastr
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "newestOnTop": false,
        "progressBar": true,
        "positionClass": "toast-top-right",
        "preventDuplicates": false,
        "showDuration": "300",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    }

    // 显示错误信息
    let message = '${message}';
    if (message) {
        toastr.error(message);
    }

    // 密码显示/隐藏切换
    const togglePwdBtn = document.getElementById('togglePwd');
    const pwdInput = document.getElementById('pwd');

    togglePwdBtn.addEventListener('click', () => {
        const type = pwdInput.getAttribute('type') === 'password' ? 'text' : 'password';
        pwdInput.setAttribute('type', type);

        // 切换图标
        const icon = togglePwdBtn.querySelector('i');
        if (type === 'password') {
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        } else {
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        }
    });

    // 输入框焦点效果
    const inputs = document.querySelectorAll('input[type="text"], input[type="password"]');
    inputs.forEach(input => {
        input.addEventListener('focus', () => {
            input.classList.add('input-focus-ring');
        });
        input.addEventListener('blur', () => {
            input.classList.remove('input-focus-ring');
        });
    });

    // 表单提交处理
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalContent = submitBtn.innerHTML;

        // 简单验证
        const name = document.getElementById('name').value.trim();
        const pwd = document.getElementById('pwd').value.trim();

        if (!name || !pwd) {
            e.preventDefault();
            toastr.warning('请输入用户名和密码');
            return;
        }

        // 显示加载状态
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 处理中...';
    });
</script>
</body>
</html>